import React from 'react'

export type Tb = {
  name: string
  value: number | string
  [key: string]: any
}
type ModeTitProps = {
  title: string
  className?: string
  titleBgStyle?: any
  titleTxtStyle?: any
  diplonema?: boolean
  titleSectionOther?: React.ReactNode
  tab?: Tb[]
  activeKey?: number | string
  tabChange?: (e: Tb) => void
  onTitleTabMouseEnter?: React.MouseEventHandler
  onTitleTabMouseLeave?: React.MouseEventHandler
}
export function ModuleTitle({
  title,
  diplonema = true,
  className,
  titleBgStyle,
  titleTxtStyle,
  tab,
  activeKey,
  tabChange,
  titleSectionOther,
  onTitleTabMouseEnter,
  onTitleTabMouseLeave
}: ModeTitProps) {
  return (
    <div
      className={`${'bigscreen-title'} ${className ? className : ''}`}
      style={titleBgStyle}
    >
      {diplonema ? (
        <div className="diplonema">
          <div className="l1"></div>
          <div className="l2"></div>
        </div>
      ) : null}

      <div className="bigscreen-title-section">
        <p className="bigscreen-title-txt" style={titleTxtStyle}>
          {title}
        </p>
        {titleSectionOther}
      </div>
      <div className="bigscreen-title-tab">
        {tab?.map((v, i) => {
          return (
            <div
              key={i}
              className={`tab-item ${activeKey === v.value ? ' active' : ''}`}
              onClick={() => tabChange && tabChange(v)}
              onMouseEnter={(event) => {
                onTitleTabMouseEnter?.(event)
              }}
              onMouseLeave={(event) => {
                onTitleTabMouseLeave?.(event)
              }}
            >
              {v.name}
            </div>
          )
        })}
      </div>
    </div>
  )
}
